<template>
  <div class="search-container">
    <!-- 搜索框 -->
    <!-- Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮 -->
    <form action="/" class="search-fixed">
      <van-search
        v-model="searchText"
        show-action
        placeholder="请输入搜索关键词"
        background="#3296fa"
        @input="search"
        @clear="clsSearchArr"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </form>
    <!-- 搜索框 -->

    <div class="mg-top"></div>

    <!-- 搜索历史 -->

    <search-history
      v-show="isShow"
      :searchHistorys="searchHistorys"
      :clearAllhistory="clearAllhistory"
      :clearRowHistory="clearRowHistory"
    />
    <!-- 搜索历史 -->

    <!-- 联想建议 -->
    <search-suggestion v-show="!isShow" :searchArr="searchArr" />
    <!-- 联想建议 -->
  </div>
</template>

<script>
//引入组件
import SearchHistory from "./components/search-history";
import SearchSuggestion from "./components/search-suggestion";

//请求
import { getSearchs } from "@/api/article";

export default {
  name: "SearchIndex",
  props: {},
  components: {
    SearchHistory,
    SearchSuggestion
  },
  data() {
    return {
      searchText: "",
      searchBtnActionBgColor: "#3296fa",
      searchArr: [], //联想建议
      searchHistorys: [], //搜索历史
      isShow: true
    };
  },
  mounted() {
    this.getSearchHistory();
    this.$store.commit('addCachePage','SearchIndex')
  },
  methods: {
    //点击搜索按钮保存到历史记录
    onSearch(e) {
      //点击搜索按钮改变背景颜色
      e.path[1].style.backgroundColor = this.searchBtnActionBgColor;

      //保存搜索历史
      if (!this.searchText) return;
      this.searchHistorys.unshift({
        id: Date.now(),
        searchKey: this.searchText
      });
      window.localStorage.setItem(
        "searchHistorys",
        JSON.stringify(this.searchHistorys)
      );
    },
    //输入内容
    async search() {
      if (!this.searchText.trim()) {
        this.isShow = true;
        return;
      } else {
        this.isShow = false;
      }
      let { data } = await getSearchs(this.searchText);
      this.searchArr = data.data.results;
    },
    //获取搜索历史
    getSearchHistory() {
      let rs = window.localStorage.getItem("searchHistorys");
      if (!rs) return;
      this.searchHistorys = JSON.parse(rs);
      // console.log(this.searchHistorys);
    },
    //当输入框为空时 ，清空联想内容
    clsSearchArr() {
      this.searchArr = [];
    },
    //清除所有搜索历史
    clearAllhistory() {
      this.searchHistorys = [];
      window.localStorage.setItem("searchHistorys", "");
    },
    //清除一个搜索历史
    clearRowHistory(id) {
      console.log("要删除的id==>" + id);
      let rs = window.localStorage.getItem("searchHistorys");
      rs = JSON.parse(rs);
      for (var i = 0; i < rs.length; i++) {
        if (rs[i].id == id) {
          rs.splice(i, 1);
          this.searchHistorys = rs;
          window.localStorage.setItem("searchHistorys", JSON.stringify(rs));
          return;
        }
      }
    }
  }
};
</script>


<style scoped lang="less">
.search-container {
  overflow: none;
  .search-fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;

    .van-search__action {
      color: #fff;
    }
  }
  .mg-top {
    width: 100%;
    height: 110px;
  }
}
</style>